<template>
   <n-data-table
    :columns="columns"
    :data="data"
    :pagination="pagination"
    :bordered="false"
  />
</template>
<script lang="ts" setup >
import { h, onMounted } from 'vue'
import { NButton, useMessage } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import MyRequest from '@/service/service'
import { useUserStore } from '@/store/modules/user'
onMounted(() => {
    getUserInfo()
})
const user = useUserStore()
type UserInfo = {
  username: string
  nickname: string
  email: string
  user_pic:string
}

const createColumns = ({
  play
}: {
  play: (row: UserInfo) => void
}): DataTableColumns<UserInfo> => {
  return [
    {
      title: 'Username',
      key: 'username'
    },
    {
      title: 'Nickname',
      key: 'nickname'
    },
    {
      title: 'Email',
      key: 'email'
    },
    {
      title: 'User_pic',
      key: 'user_pic'
    },
    {
      title: 'Action',
      key: 'actions',
      render (row) {
        return h(
          NButton,
          {
            strong: true,
            tertiary: true,
            size: 'small',
            onClick: () => play(row)
          },
          { default: () => 'Play' }
        )
      }
    }
  ]
}

const data: UserInfo[] = [
  { username: 'admin', nickname: 'Wonderwall', email: '4:18',user_pic:'123'},
]
const message = useMessage()
const columns = createColumns({
    play (row: UserInfo) {
        message.info(`Play ${row.username}`)
    }
})
const  pagination = false 
const getUserInfo = function(){//获取用户信息
    type Req = {
        id:number
    }
    MyRequest<Req>({
        name: 'userinfo',
        params:{
            id:6
        },
    })
    .then((res:any)=>{
        console.log(res)
        if(res.status==0){

        }
    })
}

</script>
<style lang="scss" scoped>

</style>
